<template>
  <div class="application-detail">
    <NavTitle :title="navTitle" />
    <div class="application-content">
      <div class="application-info" v-for="(item, index) in application" :key="index">
        <div class="application-name">{{ item.name }}</div>
        <div class="application-description">{{ item.description }}</div>
      </div>
    </div>
    <NavTitle class="mt-2" title="人员信息" />
    <MemberMng
      v-if="curApplicationCode"
      :role-options="roleOptions"
      :object-id="curApplicationCode"
      :object-type="ResourceType.app"
      :key="curApplicationCode"
    />
  </div>
</template>

<script setup lang="ts">
import { getAppData } from '@/api/applicationManagement';
import { useApplicationStore } from '@/store/modules/app';
import { storeToRefs } from 'pinia';
import { rolesMap } from '@/settings/commonSettings';
import { Role, ResourceType } from '@/enums/pipelineEnum';

const counterStore = useApplicationStore();
const { appData } = storeToRefs(counterStore);
const emits = defineEmits(['updateLoading']);
const navTitle = ref('基本信息');
const roleOptions = computed(() =>
  Object.entries(rolesMap)
    .map(([key, value]) => ({ value: key, label: value }))
    .filter((item) => item.value != Role.developer),
);
const application = ref([
  {
    name: '应用名称',
    description: '',
    value: 'name',
  },
  {
    name: '应用编码',
    description: '',
    value: 'code',
  },

  {
    name: '创建人',
    description: '',
    value: 'creator',
  },
  {
    name: '功能描述',
    description: '',
    value: 'description',
  },
  {
    name: '创建时间',
    description: '',
    value: 'createTime',
  },
]);
const curApplicationCode = computed(() => application.value.find((item) => item.value === 'code')?.description);
const getAppEditData = async (code: number | string) => {
  await getAppData(code).then((res: any) => {
    application.value = application.value.map((item) => {
      item.description = res[item.value];
      return item;
    });
  });
  emits('updateLoading', false);
};

watch(
  () => appData,
  (newVal: any) => {
    newVal.value.code && getAppEditData(newVal.value.code);
  },
  {
    immediate: true,
  },
);
</script>

<style lang="less" scoped>
.application-detail {
  .mt-2 {
    margin-top: 20px;
  }
  .application-content {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #ecf3fb;
    border-left: 1px solid #ecf3fb;
    border-radius: 4px;

    .application-info {
      display: flex;
      width: 33.333333%;
      align-items: center;
      min-height: 54px;
      border-bottom: 1px solid #ecf3fb;
      border-right: 1px solid #ecf3fb;

      .application-name {
        min-width: 120px;
        flex: 3;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 16px;
        background: #f9faf9;
        box-shadow: 1px 0px 0px 0px rgba(236, 243, 251, 1);
        border-radius: 4px 0px 0px 0px;
        font-size: 14px;
        color: #666666;
        font-weight: 400;
      }
      .application-description {
        flex: 7;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        padding: 16px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.8);
        letter-spacing: 0;
        font-weight: 400;
      }
    }
  }
}
</style>
